<template>
  <el-button type="primary" @click="openDialog"> 添加用户 </el-button>
  <!--  用户表-->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="username" label="姓名" width="200" />
    <el-table-column prop="phone" label="手机号" width="200" />
    <el-table-column prop="sex" label="性别" width="200">
      <template #default="scope">
        <span v-if="scope.row.sex == 0">男</span>
        <span v-else-if="scope.row.sex == 1">女</span>
        <span v-else-if="scope.row.sex == 2">--</span>
      </template>
    </el-table-column>
    <el-table-column prop="remark" label="备注" width="200" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          type="success"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" width="50%">
    <h2 style="text-align: center">{{ dialogTitle }}</h2>
    <br />
    <el-form
      :model="user"
      label-width="120px"
      :size="formSize"
      id="editForm"
      :rules="rules"
      ref="ediForm"
    >
      <el-form-item label="用户名" prop="username" required>
        <el-input v-model="user.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password" required v-show="isShowPwd">
        <el-input v-model="user.password" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone" required>
        <el-input v-model="user.phone" />
      </el-form-item>
      <el-form-item label="性别" prop="">
        <el-radio-group v-model="user.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="">
        <el-input v-model="user.remark" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          @click="handleCreate"
          v-show="isShowCreateBtn"
        >
          确定
        </el-button>
        <el-button type="primary" @click="edit" v-show="isShowUpdateBtn">
          确定修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      dialogVisible: false,
      tableData: [{}],
      formSize: "default",
      dialogTitle: "",
      isShowPwd: true,
      isShowCreateBtn: false,
      isShowUpdateBtn: false,
      user: {
        username: "",
        password: "",
        phone: "",
        sex: "2",
        img: null,
        remark: "用户",
        createTime: "",
        updateTime: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    cancel() {
      this.dialogVisible = false;
      this.isShowCreateBtn = false;
      this.isShowUpdateBtn = false;
      this.user = {
        username: "",
        password: "",
        phone: "",
        sex: "2",
        img: null,
        remark: "用户",
        createTime: "",
        updateTime: "",
      };
    },
    openDialog() {
      this.dialogTitle = "添加用户";
      this.dialogVisible = true;
      this.isShowCreateBtn = true;
      this.isShowPwd = true;
    },
    fetchData() {
      this.$axios
        .get("http://localhost:8888/users/findAllUser")
        .then((response) => {
          this.tableData = response.data.data;
          console.info(this.tableData);
          // document.getElementById("editForm").reset();
          this.user = {
            username: "",
            password: "",
            phone: "",
            sex: "2",
            img: null,
            remark: "用户",
            createTime: "",
            updateTime: "",
          };
          this.dialogVisible = false;
          this.isShowUpdateBtn = false;
          this.isShowCreateBtn = false;
        });
    },
    handleEdit(number, user) {
      this.dialogTitle = "编辑用户";
      this.dialogVisible = true;
      this.isShowUpdateBtn = true;
      this.isShowPwd = false;
      this.user = user;
    },
    edit() {
      this.$refs.ediForm.validate((isValid) => {
        if (isValid) {
          this.$axios
            .post("http://localhost:8888/users/updateUser", this.user, {
              headers: {
                Authorization: "Bearer " + token,
              },
            })
            .then((response) => {
              if (response.data.status == 10000) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.fetchData();
              } else {
                this.$message.error({
                  type: "error",
                  message: response.data.msg,
                });
              }
            });
        } else {
          this.$message.error("请填写必填信息！");
        }
      });
    },
    handleDelete(number, user) {
      this.$alert(`确认删除${user.username}吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.info(user.id);
        const id = user.id;
        this.$axios
          .get("http://localhost:8888/users/deleteUser", { params: { id } })
          .then((response) => {
            if (response.data.status == 10000) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.fetchData();
            } else {
              this.$message.error({
                type: "error",
                message: response.data.msg,
              });
            }
          })
          .catch(() => {});
      });
    },
    handleCreate() {
      this.$refs.ediForm.validate((isValid) => {
        if (isValid) {
          this.$axios
            .post("http://localhost:8888/users/addUser", this.user)
            .then((response) => {
              if (response.data.status == 10000) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.fetchData();
              } else {
                this.$message.error({
                  type: "error",
                  message: response.data.msg,
                });
              }
            });
        } else {
          this.$message.error("请填写必填信息！");
        }
      });
    },
  },
  created() {
    this.fetchData();
  },
  mounted() {},
};
</script>

<style scoped>
</style>